<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keyword" content="没有过时的技术，只有过时的产品">
  <title>ant 2.x</title>


</head>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/locale/zh-cn.min.js"></script>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.47/vue.global.prod.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/ant-design-vue/2.2.8/antd.min.js"></script>

  <link rel="stylesheet" type="text/css"
    href=" https://cdnjs.cloudflare.com/ajax/libs/ant-design-vue/2.2.8/antd.min.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/ant-design-vue/2.2.8/antd.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/antv-g2/4.2.10/g2.min.js"></script>




  <div id="app">

    <a-row>
      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div id='chartDiv' style="width:100%;height:366px"> </div>
      </a-col>

      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div id='popChart' style="width:100%;height:366px"></div>
      </a-col>
    </a-row>

    <a-row>
      <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</a-col>
      <a-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4"> <a-button type="primary">保存</a-button></a-col>
      <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</a-col>
    </a-row>

    <a-row>
      <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</a-col>
      <a-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4"> <a-button>取消</a-button></a-col>
      <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</a-col>
    </a-row>

    <a-row>
      <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12"><a-date-picker /></a-col>
      <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <a-calendar :locale="locale"/></a-col>
    </a-row>

  </div>



  <script>

    const { reactive, getCurrentInstance, ref } = Vue;
    const { Chart } = G2;
    const locale = ref({
    lang: {
        month: '月',
        year: '年',
    },
})
    const initNetChart = () => {
      const chart = new Chart({       // 创建一个图表
        container: "popChart",      // 容器是上面那个div
        autoFit: true,              // 自适应
        height: 150                 // 高度
      });
      chart.options({
        type: "line",
        autoFit: true,
        data: [{ "date": "2007-4-23", "close":  1234 } ,{ "date": "2007-4-24", "close":  1254 } ,],
        encode: { x: "date", y: "close" },
      });

      chart.render();
    }

    const initLineChart = () => {
      const chart = new Chart({       // 创建一个图表
        container: "chartDiv",      // 容器是上面那个div
        autoFit: true,              // 自适应
        height: 105                 // 高度
      });


      // 以上的数据转换后一条转为两条，eg：
      // { time: "周一", vs: 1234, vk: 124 }, 转换后=>
      // { "time": "周一", "type": "vs", "count": 1234 },{ "time": "周一", "type": "vk", "count": 124 },

      chart.data([{ "time": "周一", "type": "vs", "count": 1234 }, { "time": "周一", "type": "vk", "count": 124 }]);            // 现在可以将dv的rows作为数据源
      chart.scale({                   // 之前的chart.source()方法已经替换为chart.data()和chart.scale()
        time: {
          range: [0, 1]           // 输出数据的范围，默认[ 0, 1 ]，格式为 [ min, max ]，min 和 max 均为 0 至 1 范围的数据 --官方
        },                          // 简单来说就是 这个图标的多少用于显示数据[0,1]就是数据占满横坐标宽度,[0,0.5]就是还余下半个空的横坐标
        count: {
          min: 0,                 // 我的纵坐标count的最小值，不设置的话自动取数据中最小数的作为y=0的起始
          nice: true              // 默认为 true，用于优化数值范围，使绘制的坐标轴刻度线均匀分布。例如原始数据的范围为 [3, 97]，如果 nice 为 true，那么就会将数值范围调整为 [0, 100] --官方
        },
      });

      chart.tooltip({
        showCrosshairs: true,       // 展示 Tooltip 辅助线
        shared: true,
        crosshairs: {
          type: 'line'
        }
      });

      chart.axis('count', {           // 坐标轴
        label: {
          formatter: function formatter(val) {
            return val;            // 这里可以改坐标刻度的形式
          }
        }
      });
      chart.line().position('time*count').color('type').shape('smooth');      //方法都在官方
      chart.point().position('time*count').color('type').size(4).shape('circle').style({
        stroke: '#fff',             // 描边
        lineWidth: 1                // 宽度
      });
      chart.render();                 // 这个图表终于要被渲染展示了...
    }


    const pd = reactive({});// 定义层对象

    // 创建Vue应用
    let appdat = {
      setup() {



        return { pd,locale }
      },
      created() {

      },
      mounted() {
        // Vue-Redux 状态管理
        console.log('mounted')



        initLineChart();
        initNetChart();


      },

    }

    app = Vue.createApp(appdat);

    app.use(antd);
    // 挂载Vue应用
    app.mount('#app');
  </script>
</body>

</html>